<template>
  <el-container class="blogs-container">
    <el-main>
      <!-- 路由占位符 -->
      <el-row :gutter="20">
        <el-col :span="13" :offset="3">
          <el-card shadow="hover" v-for="blog in blogslist" :key="blog.id">
            <h2>
              <router-link :to="{name: 'BlogDetail',params:{blogId:blog.id}}">{{blog.title}}</router-link>
            </h2>
            <p>{{blog.description}}</p>
            <p class="cteated">{{blog.created}}</p>
          </el-card>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :current-page="currentPage"
            :page-size="pageSize"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </el-col>
        <el-col :span="5">
          <Aside></Aside>
        </el-col>
      </el-row>
      <Footer></Footer>
    </el-main>
  </el-container>
</template>
<script>
import Aside from '../components/Aside'
import Footer from '../components/Footer'
export default {
  components: { Aside, Footer },
  data() {
    return {
      blogslist: {},
      currentPage: 1,
      total: 0,
      pageSize: 5

    }
  },
  created() {
    this.getBlogsList()
  },
  methods: {
    async getBlogsList() {
      // const { data: res } = await this.$http.get('blogs', { params: this.currentPage })
      const { data: res } = await this.$http.get('blogs?currentPage=' + this.currentPage)
      this.blogslist = res.data.records
      this.total = res.data.total
      this.pageSize = res.data.size
      this.currentPage = res.data.current
    },
    handleCurrentChange(newPage) {
      this.currentPage = newPage
      this.getBlogsList()
    }
  }
}
</script>
<style lang="less" scoped>
.el-container {
  height: 100%;
}
.el-main {
  background-color: #f5f5f5;
}
.el-pagination {
  margin-top: 10px;
}
</style>
